<template>
  <div class="containers">
    <!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的，并设置ref让vue获取到element -->
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { procDefApi } from "@/api/flow/prodef/index";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
const props = defineProps({
  procDefId: {
    type: String,
    default: "",
  },
});

const canvas = ref<HTMLDivElement | null>(null);

let modeler: BpmnModeler;

function init() {
  if (canvas.value) {
    modeler = new BpmnModeler({
      // 设置bpmn的绘图容器为上门获取的画布 element
      container: canvas.value,
    });

    if (props.procDefId) {
      procDefApi.findProcDefXmlById(props.procDefId).then((res) => {
        console.log(res.data);
        modeler.importXML(res.data, (err: any) => {
          if (err) {
            console.error(err);
            console.error("初始化模板异常");
          }
        });
      });
    }
  }
}
init();
</script>
<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 82px);
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>
